<style lang="scss">
.ivu-modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 0;
  }
}
</style>
<template>
  <div class="content">
    <Breadcrumb>
      <BreadcrumbItem to="/index">首页</BreadcrumbItem>
      <BreadcrumbItem>系统设置</BreadcrumbItem>
    </Breadcrumb>
    <div align="center" style="margin: 0 auto;width: 600px;">
      <Form :model="form" :label-width="150">
        <FormItem label="壁纸随机显示设置">
          <RadioGroup v-model="form.WALLPAPER_RANDOM" :disabled="disabled.WALLPAPER_RANDOM" @on-change="randomChange">
            <Radio :label="1">随机</Radio>
            <Radio :label="2">特定</Radio>
            <Radio :label="3">壁纸库</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="随机壁纸类型设置">
          <Select v-model="form.WALLPAPER_RANDOM_TYPE" :disabled="disabled.WALLPAPER_RANDOM_TYPE">
            <Option :value="0">全部</Option>
            <Option v-for="item in imageType" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="特定壁纸设置">
          <Input v-model="form.WALLPALER_GIVEN" style="display: none;" :disabled="disabled.WALLPALER_GIVEN"/>
          <Input :value="form.WALLPALER_GIVEN === 0 ? '无' : imageData.cover.name" :disabled="disabled.WALLPALER_GIVEN"/>
          <div v-show="!disabled.WALLPALER_GIVEN">
            <img v-show="imageData.cover.link" :src="imageData.cover.link" :alt="imageData.cover.name" :title="imageData.cover.name" @click="imageData.show = true" style="height: 160px;padding-top: 15px;">
            <div v-show="!imageData.cover.link" style="padding: 20px 0;width: 100%;height: 80px;text-align: center;position: relative;cursor: pointer;" @click="imageData.show = true">
              <div style="position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);">
                <Icon type="md-photos" size="30" style="color: #3399ff"></Icon>
                <p style="font-size: 12px">单击选择图片</p>
              </div>
            </div>
          </div>
        </FormItem>
        <FormItem label="壁纸库设置">
          <Input v-model="form.WALLPAPER_LIB" style="display: none" :disabled="disabled.WALLPAPER_LIB"/>
          <Input :value="form.WALLPAPER_LIB === 0 ? '无' : wallpaperData.cover.name" :disabled="disabled.WALLPAPER_LIB"/>
          <div v-show="!disabled.WALLPAPER_LIB">
            <img v-show="wallpaperData.cover.link" :src="wallpaperData.cover.link" :alt="wallpaperData.cover.name" :title="wallpaperData.cover.name" @click="wallpaperData.show = true" style="height: 160px;padding-top: 15px;">
            <div v-show="!wallpaperData.cover.link" style="padding: 20px 0;width: 100%;height: 80px;text-align: center;position: relative;cursor: pointer;" @click="wallpaperData.show = true">
              <div style="position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);">
                <Icon type="md-photos" size="30" style="color: #3399ff"></Icon>
                <p style="font-size: 12px">单击选择壁纸库</p>
              </div>
            </div>
          </div>
        </FormItem>
        <div class="item-but">
          <Button type="info" @click="edit">保存</Button>
        </div>
      </Form>
    </div>
    <Modal
      v-model="imageData.show"
      title="选择图片"
      cancel-text="取消"
      fullscreen
      class-name="center-modal"
      @on-visible-change="imageModalChange">
      <Form inline :label-width="70" label-position="left" :model="imageData.search">
        <FormItem label="图片名">
          <Input type="text" v-model="imageData.search.name" placeholder="请输入图片名检索"/>
        </FormItem>
        <FormItem label="图片类型">
          <Select v-model="imageData.search.imageType" clearable filterable placeholder="请选择图片类型检索">
            <Option v-for="v in imageData.typeData" :value="v.id" :key="v.id">{{ v.name }}</Option>
          </Select>
        </FormItem>
        <Button type="primary" style="margin-left: 30px" @click="imageSearchClick">搜索</Button>
      </Form>
      <div style="float: left" align="center">
        <div v-for="(v, i) in imageData.data" class="image-item" :class="{ 'image-item-action': i === imageData.actionIndex }" :key="v.id" @click="imageItemClick(i, v.id, v.link, v.name)">
          <img
            :src="v.link"
            :alt="v.name"
            :title="v.name"
            height="200px"
          />
          <span class="type-text">{{ v.typeName }}</span>
          <span class="name-text">{{ v.name }}</span>
        </div>
      </div>
      <Page style="clear: both;" :current="imageData.current" :total="imageData.total" :page-size="imageData.pageSize" show-total show-sizer show-elevator :styles="{ marginTop: '20px' }" @on-change="imagePageChange" @on-page-size-change="imagePageSizeChange" />
      <div slot="footer">
        <Button type="text" size="large" @click="imageData.show = false">取消</Button>
        <Button type="primary" size="large" @click="imageSelectedClick">确定</Button>
      </div>
    </Modal>
    <Modal
      v-model="wallpaperData.show"
      title="选择图片"
      cancel-text="取消"
      fullscreen
      class-name="center-modal"
      @on-visible-change="wallpaperModalChange">
      <Form inline :label-width="100" label-position="left" :model="wallpaperData.search">
        <FormItem label="壁纸库名称">
          <Input type="text" v-model="wallpaperData.search.name" placeholder="请输入壁纸库名称检索"/>
        </FormItem>
        <Button type="primary" style="margin-left: 30px" @click="wallpaperSearchClick">搜索</Button>
      </Form>
      <div align="center">
        <div v-for="(v, i) in wallpaperData.data" class="image-item" :class="{ 'image-item-action': i === wallpaperData.actionIndex }" :key="v.id" @click="wallpaperItemClick(i, v.id, v.image.link, v.name)">
          <img
            :src="v.image.link"
            :alt="v.image.name"
            :title="v.image.name"
            height="200px">
          <span class="name-text">{{ v.name }}</span>
        </div>
      </div>
      <Page :current="wallpaperData.current" :total="wallpaperData.total" :page-size="wallpaperData.pageSize" show-total show-sizer show-elevator :styles="{ marginTop: '20px' }" @on-change="wallpaperPageChange" @on-page-size-change="wallpaperPageSizeChange" />
      <div slot="footer">
        <Button type="text" size="large" @click="wallpaperData.show = false">取消</Button>
        <Button type="primary" size="large" @click="wallpaperSelectedClick">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getSetting, updateSetting } from '@/api/setting'
import { allImageType } from '@/api/imageType'
import { imageById, imageList } from '@/api/image'
import { wallpaperById, wallpaperList } from '@/api/wallpaper'

export default {
  name: 'SystemSetting',
  mounted () {
    getSetting().then(res => {
      if (res.code === 200) {
        this.form = res.data.form
        this.randomChange(this.form.WALLPAPER_RANDOM)
      }
    })
    allImageType().then(res => {
      if (res.code === 200) {
        this.imageType = res.data.list
      }
    })
    this.getImageData()
    this.getWallpaperData()
  },
  data () {
    return {
      form: {},
      imageType: [],
      disabled: {},
      imageData: {
        show: false,
        total: 0,
        current: 1,
        pageSize: 10,
        data: [],
        search: {},
        typeData: [],
        item: {},
        actionIndex: -1,
        cover: {}
      },
      wallpaperData: {
        show: false,
        total: 0,
        current: 1,
        pageSize: 10,
        data: [],
        search: {},
        typeData: [],
        item: {},
        actionIndex: -1,
        cover: {}
      }
    }
  },
  methods: {
    randomChange (v) {
      this.disabled = {}
      if (v === 1) {
        this.disabled.WALLPALER_GIVEN = true
        this.disabled.WALLPAPER_LIB = true
        this.form.WALLPALER_GIVEN = 0
        this.form.WALLPAPER_LIB = 0
      } else if (v === 2) {
        this.disabled.WALLPAPER_RANDOM_TYPE = true
        this.disabled.WALLPAPER_LIB = true
        this.form.WALLPAPER_RANDOM_TYPE = 0
        this.form.WALLPAPER_LIB = 0
        if (this.form.WALLPALER_GIVEN !== 0) {
          imageById(this.form.WALLPALER_GIVEN).then(res => {
            this.imageData.cover = res.data.image
          })
        }
      } else {
        this.disabled.WALLPALER_GIVEN = true
        this.disabled.WALLPAPER_RANDOM_TYPE = true
        this.form.WALLPALER_GIVEN = 0
        this.form.WALLPAPER_RANDOM_TYPE = 0
        if (this.form.WALLPAPER_LIB !== 0) {
          wallpaperById(this.form.WALLPAPER_LIB).then(res => {
            this.wallpaperData.cover = res.data.wallpaper.image
          })
        }
      }
    },
    getImageData () {
      imageList(this.imageData.search, this.imageData.current, this.imageData.pageSize).then(res => {
        this.imageData.total = res.data.page.total
        this.imageData.data = res.data.page.records
        this.imageData.current = res.data.page.current
      })
    },
    getWallpaperData () {
      wallpaperList(this.wallpaperData.search, this.wallpaperData.current, this.wallpaperData.pageSize).then(res => {
        this.wallpaperData.current = res.data.page.current
        this.wallpaperData.total = res.data.page.total
        this.wallpaperData.data = res.data.page.records
      })
    },
    imageModalChange (v) {
      if (!v) {
        this.imageData.item = {}
        this.imageData.actionIndex = -1
      }
    },
    imageSearchClick () {
      this.imageData.current = 1
      this.getImageData()
    },
    imageSelectedClick () {
      if (this.imageData.item.link === undefined || this.imageData.item.link.trim() === '') return this.$Message.warning('请选择一张图片作为封面！')
      this.form.WALLPALER_GIVEN = this.imageData.item.id
      this.imageData.cover.link = this.imageData.item.link
      this.imageData.cover.name = this.imageData.item.name
      this.imageData.show = false
    },
    imagePageChange (index) {
      this.imageData.current = index
      this.getImageData()
    },
    imagePageSizeChange (size) {
      this.imageData.current = 1
      this.imageData.pageSize = size
      this.getImageData()
    },
    imageItemClick (i, id, link, name) {
      this.imageData.actionIndex = i
      this.imageData.item.id = id
      this.imageData.item.link = link
      this.imageData.item.name = name
    },
    edit () {
      updateSetting(this.form).then(res => {
        if (res.code === 200) {
          this.$Message.success(res.msg)
        }
      })
    },
    wallpaperModalChange (v) {
      if (!v) {
        this.wallpaperData.item = {}
        this.wallpaperData.actionIndex = -1
      }
    },
    wallpaperPageChange (index) {
      this.current = index
      this.getWallpaperData()
    },
    wallpaperPageSizeChange (size) {
      this.current = 1
      this.pageSize = size
      this.getWallpaperData()
    },
    wallpaperSearchClick () {
      this.current = 1
      this.getWallpaperData()
    },
    wallpaperItemClick (i, id, link, name) {
      this.wallpaperData.actionIndex = i
      this.wallpaperData.item.id = id
      this.wallpaperData.item.link = link
      this.wallpaperData.item.name = name
    },
    wallpaperSelectedClick () {
      if (this.wallpaperData.item.link === undefined || this.wallpaperData.item.link.trim() === '') return this.$Message.warning('请选择一张图片作为封面！')
      this.form.WALLPAPER_LIB = this.wallpaperData.item.id
      this.wallpaperData.cover.link = this.wallpaperData.item.link
      this.wallpaperData.cover.name = this.wallpaperData.item.name
      this.wallpaperData.show = false
    }
  }
}
</script>

<style scoped lang="scss">
.image-item {
  display: inline-block;
  position: relative;
  height: 200px;
  margin-right: 10px;
  margin-bottom: 50px;
  overflow: hidden;
  .type-text {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    color: #FFFFFF;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .name-text {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
    color: #FFFFFF;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .item-but {
    text-align: right;
    button {
      margin-left: 10px;
    }
  }
}
.image-item-action {
  border: 3px solid #ff4d4d;
}
</style>
